<template>
  <div id="top">
    <div class="height145">
      <div class="leftTop">
        <ul>
          <li class="totalNum">
            <p class="img">
              {{ this.$parent.toThousands(this.pcPv) }}
            </p>
            <p class="color36 font14 text">浏览量(PV)</p>
          </li>
          <li class="totalNum">
            <p class="img">
              {{ this.$parent.toThousands(this.pcUv) }}
            </p>
            <p class="color36 font14 text">访客量(UV)</p>
          </li>
          <li class="totalNum">
            <p class="img">
              {{ this.$parent.toThousands(this.pcGmv) }}
            </p>
            <p class="color36 font14 text">成交额</p>
          </li>
        </ul>
        <div class="totalImg">
          <img src="../assets/img/PC端.png" alt="" />
        </div>
      </div>
      <div class="centerTop">
        <div class="bgImg colorfff font20">今日成交总金额</div>
        <p class="font90" id="numBox">
          <span class="icon">￥</span>
          <span class='flip'></span>
          <!-- <AnimationNum :totalGmv="this.totalGmv" /> -->
          <!-- {{ this.$parent.toThousands(this.totalGmv) }} -->
        </p>
        <p class="date colorfff font20">
          <span class="mr26">119活动结束倒计时</span
          ><span>{{ this.hours }}：{{ this.minutes }}：{{ this.seconds }}</span>
        </p>
      </div>
      <div class="rightTop">
        <div class="totalImg">
          <img src="../assets/img/移动端.png" alt="" />
        </div>
        <ul>
          <li class="totalNum">
            <p class="color36 font14 text">浏览量(PV)</p>
            <p class="img">
              {{ this.$parent.toThousands(this.appPv) }}
            </p>
          </li>
          <li class="totalNum">
            <p class="color36 font14 text">访客量(UV)</p>
            <p class="img">
              {{ this.$parent.toThousands(this.appUv) }}
            </p>
          </li>
          <li class="totalNum">
            <p class="color36 font14 text">成交额</p>
            <p class="img">
              {{ this.$parent.toThousands(this.appGmv) }}
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import NumberFlip from '../utils/NumberFlip'
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
import AnimationNum from "../components/animationNum";
export default {
  components: {
    AnimationNum,
  },
  props: {
    type: {
      default: 0,
    },
  },
  data() {
    return {
      nowTime: 0, //当前时间戳
      startTime: 0, //开始时间
      endTime: 0, //结束时间
      timeName: null,
      nowYear: "", //当前年月日
      nowHour: "", //当前时分秒
      terminalPvUv: {}, //对内（终端成交 板块2）
      totalAxios: null,
      hours: "00",
      minutes: "00",
      seconds: "00",
      totalGmv:0,
      appPv: 0,
      appUv: 0,
      appGmv: 0,
      pcGmv: 0,
      pcPv: 0,
      pcUv: 0,
      timer:null
    };
  },
  created() {
    this.getTime();
  },
  async mounted() {
    await this.getTerminalPvUv(); //刚进入页面时请求
    await this.intervalAxios(); //循环请求
    await this.init()
    await this.next()
  },
  methods: {
    //初始化数据
    init() {
      this.item = new NumberFlip('.flip', String(this.totalGmv))
    },
    next() {
      this.item.next(String(this.totalGmv))
    },
    // 获取时间
    async getTime() {
      if (this.type == 1) {
        let res = await getRequest(url.countDownOut);
        if (res.data.code == "000000") {
          this.nowTime = res.data.content.nowTime;
          this.startTime = res.data.content.startTime;
          this.endTime = res.data.content.endTime;
          this.computeTime();
        }
      } else {
        let res = await getRequest(url.countDown);
        if (res.data.code == "000000") {
          this.nowTime = res.data.content.nowTime;
          this.startTime = res.data.content.startTime;
          this.endTime = res.data.content.endTime;
          this.computeTime();
        }
      }
    },
    // 获取对内（终端成交 板块2）
    async getTerminalPvUv() {
      if (this.type == 1) {
        let res = await getRequest(url.terminalPvUvOut);
        if (res.data.code == "000000") {
          // this.terminalPvUv = res.data.content;
          if (res.data.content.totalGmv != 0) {
            this.totalGmv = res.data.content.totalGmv;
          }
          if (res.data.content.appPv != 0) {
            this.appPv = res.data.content.appPv;
          }
          if (res.data.content.appUv != 0) {
            this.appUv = res.data.content.appUv;
          }
          if (res.data.content.appGmv != 0) {
            this.appGmv = res.data.content.appGmv;
          }
          if (res.data.content.pcGmv != 0) {
            this.pcGmv = res.data.content.pcGmv;
          }
          if (res.data.content.pcPv != 0) {
            this.pcPv = res.data.content.pcPv;
          }
          if (res.data.content.pcUv != 0) {
            this.pcUv = res.data.content.pcUv;
          }
        }
      } else {
        let res = await getRequest(url.terminalPvUv);
        if (res.data.code == "000000") {
          if (res.data.content.totalGmv != 0) {
            this.totalGmv = res.data.content.totalGmv;
          }
          if (res.data.content.appPv != 0) {
            this.appPv = res.data.content.appPv;
          }
          if (res.data.content.appUv != 0) {
            this.appUv = res.data.content.appUv;
          }
          if (res.data.content.appGmv != 0) {
            this.appGmv = res.data.content.appGmv;
          }
          if (res.data.content.pcGmv != 0) {
            this.pcGmv = res.data.content.pcGmv;
          }
          if (res.data.content.pcPv != 0) {
            this.pcPv = res.data.content.pcPv;
          }
          if (res.data.content.pcUv != 0) {
            this.pcUv = res.data.content.pcUv;
          }
        }
      }
    },
    // 计算时间
    computeTime() {
      this.timeName = setInterval(() => {
        // 计算当前时间
        this.nowTime = this.nowTime + 1000;
        // if (this.startTime >= this.nowTime) {
        //   // 活动未开始
        //   this.hours = Math.floor(
        //     ((this.startTime - this.nowTime) / 1000 / 60 / 60) % 24
        //   );
        //   // 判断小时是否大于24小时
        //   if (this.startTime - this.nowTime > 86400000) {
        //     let num = parseInt((this.startTime - this.nowTime) / 86400000);
        //     this.hours = num * 24 + this.hours;
        //   }
        //   this.minutes = Math.floor(
        //     ((this.startTime - this.nowTime) / 1000 / 60) % 60
        //   );
        //   this.seconds = Math.floor(
        //     ((this.startTime - this.nowTime) / 1000) % 60
        //   );
        //   if (this.hours < 10) {
        //     this.hours = "0" + this.hours;
        //   }
        //   if (this.minutes < 10) {
        //     this.minutes = "0" + this.minutes;
        //   }
        //   if (this.seconds < 10) {
        //     this.seconds = "0" + this.seconds;
        //   }
        // } else {
          // 活动已开始
          if (this.endTime - this.nowTime > 0) {
            this.hours = Math.floor(
              ((this.endTime - this.nowTime) / 1000 / 60 / 60) % 24
            );
            // 判断小时是否大于24小时
            if (this.endTime - this.nowTime > 86400000) {
              let num = parseInt((this.endTime - this.nowTime) / 86400000);
              this.hours = num * 24 + this.hours;
            }
            this.minutes = Math.floor(
              ((this.endTime - this.nowTime) / 1000 / 60) % 60
            );
            this.seconds = Math.floor(
              ((this.endTime - this.nowTime) / 1000) % 60
            );
            if (this.hours < 10) {
              this.hours = "0" + this.hours;
            }
            if (this.minutes < 10) {
              this.minutes = "0" + this.minutes;
            }
            if (this.seconds < 10) {
              this.seconds = "0" + this.seconds;
            }
          } else {
            this.hours = "00";
            this.minutes = "00";
            this.seconds = "00";
          }
        // }
      }, 1000);
    },
    //时间戳转换方法    date:时间戳数字
    formatDate(date) {
      var date = new Date(date);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.nowYear = YY + MM + DD;
      this.nowHour = hh + mm + ss;
      return YY + MM + DD + " " + hh + mm + ss;
    },
    // 每个1s请求接口
    intervalAxios() {
      if (this.type == 1) {
        this.totalAxios = setInterval(() => {
          this.getTerminalPvUv();
          this.next()
        }, 1500);
      }else{
        this.totalAxios = setInterval(() => {
          this.getTerminalPvUv();
          this.next()
        }, 2000);
      }
      // 1分钟请求一次时间接口
      this.timer = setInterval(() => {
        getRequest(url.countDownOut).then(res=>{
          if (res.data.code == "000000") {
            this.nowTime = res.data.content.nowTime;
            this.startTime = res.data.content.startTime;
            this.endTime = res.data.content.endTime;
          }
        });
      }, 60000);
    },
  },
  watch:{
  },
  destroyed() {
    clearInterval(this.timeName);
    clearInterval(this.totalAxios);
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
#top {
  height: 370px;
  background-image: url("../assets/img/toptitle_bg.png");
  background-size: cover;
  background-position: center center;
  .height145 {
    height: 145px;
    display: flex;
    padding-top: 105px;
  }
  .leftTop {
    width: 645px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 70px;
    padding-right: 45px;
    ul {
      .totalNum {
        display: flex;
        align-items: center;
        margin-bottom: 9px;
        .img {
          width: 176px;
          height: 27px;
          background: url("../assets/img/totalnum_left.png") no-repeat right 0;
          color: #4ba3c2;
          font-size: 12px;
          line-height: 27px;
          text-align: right;
          padding-right: 20px;
        }
        .text {
          height: 15px;
          font-weight: bold;
          line-height: 15px;
          margin-left: 8px;
        }
      }
    }
    .totalImg {
      margin-left: 38px;
    }
  }
  .centerTop {
    width: 632px;
    text-align: center;
    .bgImg {
      width: 299px;
      height: 26px;
      background: url("../assets/img/总金额title.png") no-repeat center center;
      text-shadow: 0px 1px 6px 0px rgba(93, 91, 243, 0.81);
      margin: 0 auto;
      text-indent: 13px;
    }
    #numBox {
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      /deep/.number-flip-item{
        margin: 5px 0;
      }
      .icon{
        margin-top: 42px;
      }
    }
    /deep/.number-flip-container{
      font-size: 90px !important;
    }
    .font90 {
      font-size: 90px;
      color: #ff762c;
      text-shadow: 0px 0px 11px 1px rgba(130, 9, 125, 0.67);
      font-weight: bold;
      margin: -35px 0 -15px 0;
      font-family: MuktaMahee;
      letter-spacing: 14px;
      span {
        font-size: 38px;
      }
    }
    .date {
      .mr26 {
        margin-right: 26px;
      }
    }
  }
  .rightTop {
    margin-top: 70px;
    width: 643px;
    display: flex;
    align-items: center;
    ul {
      .totalNum {
        display: flex;
        align-items: center;
        margin-bottom: 9px;
        .img {
          width: 196px;
          height: 27px;
          background: url("../assets/img/数量-右.png") no-repeat;
          color: #4ba3c2;
          font-size: 12px;
          line-height: 27px;
          text-align: left;
          text-indent: 20px;
        }
        .text {
          width: 73px;
          margin-left: 38px;
          height: 15px;
          font-weight: bold;
          line-height: 15px;
          margin-left: 8px;
        }
      }
    }
    .totalImg {
      margin-left: 38px;
    }
  }
}
</style>